import react, {Component} from "react";
import './ComEvent.css'

class ComEvent extends Component {
  constructor() {
    super();
    this.state = {
      num: 10086
    }
    // 统一处理，绑定this，指向当前组件
    this.showData = this.showData.bind(this)
  }
  showData() {
    console.log(this.state.num);
  }
  // 显示参数
  showArg(val1, val2) {
    console.log(val1);
    console.log(val2);
  }
  // 显示事件对象
  showEvent(e) {
    console.log(e);
  }
  // 自定义和预定义参数
  showAll(val1, val2) {
    console.log(val1);
    console.log(val2.target);
  }
  clickDiv(arg, e) {
    // 阻止冒泡
    e.stopPropagation()
    console.log(arg);
  }
  showMenu(e) {
    // 阻止默认事件
    e.preventDefault()
    console.log('你右键了');
  }
  render() {
    return (
      <div>
        <p>绑定事件</p>
        <button onClick={this.showData}>ES5打印</button>
        <button onClick={()=>this.showData()}>ES6打印</button>
        <hr></hr>
        <button onClick={this.showArg.bind(this, '666', this.state.num)}>ES5传值</button>
        <button onClick={()=>this.showArg('666', this.state.num)}>ES6传值</button>
        <hr></hr>
        {/* 隐式传递 */}
        <button onClick={this.showEvent.bind(this)}>ES5传事件</button>
        {/* 显式传递 */}
        <button onClick={(e)=>this.showEvent(e)}>ES6传事件</button>
        <hr></hr>
        <button onClick={this.showAll.bind(this, '我全都要')}>ES5传所有</button>
        <button onClick={(e)=>this.showAll('我全都要', e)}>ES6传所有</button>
        <hr></hr>
        <hr></hr>
        {/* 事件流改为捕获 */}
        <div className="big" onClickCapture={()=>this.clickDiv('big')}>
          <div className="mid" onClickCapture={()=>this.clickDiv('mid')}>
            <div className="small" onClickCapture={()=>this.clickDiv('small')}></div>
          </div>
        </div>
        <hr></hr>
        <div className="big" onClick={(e)=>this.clickDiv('big', e)}>
          <div className="mid" onClick={(e)=>this.clickDiv('mid', e)}>
            <div
              className="small"
              onClick={(e)=>this.clickDiv('small', e)}
              onContextMenu={(e)=>this.showMenu(e)}
            ></div>
          </div>
        </div>
      </div>
    )
  }
}

export default ComEvent